<template>
    <div class="container">
        <statistics-header header-title="同 行 密 接 ( 接 触 ) 报 警"></statistics-header>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
                </div>
                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="1050"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <!--                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>-->
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
import {
// findrjryList
  findtypeList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import DlqSearch from '@/components/search'

export default {
  components: { StatisticsHeader, DlqSearch },
  data () {
    return {
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'card_no',
          tooltip: true,
          width: 300,
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'tel',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '区域类型',
          key: 'area_type_dlq',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'area',
          key: 'area',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'street',
          key: 'street',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'community',
          key: 'community',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'is_hubei',
          key: 'is_hubei_dlq',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'is_contact',
          key: 'is_contact_dlq',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'health_state',
          key: 'health_state_dlq',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'stay_city',
          key: 'stay_city',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: 'p2',
          key: 'p2',
          tooltip: true,
          width: 100,
          align: 'center'
        }
      ],
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      //'1:没有出现症状 \r\n2:感冒样症状：乏力、咳嗽、发烧、肌肉痛、头痛\r\n3:喘憋、呼吸急促\r\n4:恶心呕吐、腹泻\r\n5:心慌、胸闷\r\n6:结膜炎（红眼病样表现：眼睛涩、红、分泌物）\r\n7:其他症状',
      healthObj : {
        '1' : '没有出现症状',
        '2' : '感冒样症状：乏力、咳嗽、发烧、肌肉痛、头痛',
        '3' : '喘憋、呼吸急促',
        '4' : '恶心呕吐、腹泻',
        '5' : '心慌、胸闷',
        '6' : '结膜炎（红眼病样表现：眼睛涩、红、分泌物）',
        '7' : '其他症状'
      }
    }
  },
  computed: {},
  mounted () {
    this.init()
  },
  methods: {
    search (value) {
      this.pageObj.pageNo = 1
      this.init(value)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      this.tableLoading = true
      findtypeList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          console.log(data.data.results)
          for (let i = 0; i < data.data.results.length; i++) {
            let tmp = data.data.results[i]
            tmp['area_type_dlq'] = ''
            if (tmp['area_type'] === '1') {
              tmp['area_type_dlq'] = '社区'
            } else if (tmp['area_type'] === '2') {
              tmp['area_type_dlq'] = '村'
            }
            tmp['is_hubei_dlq'] = ''
            if (tmp['is_hubei'] === '1') {
              tmp['is_hubei_dlq'] = '是'
            } else if (tmp['is_hubei'] === '0') {
              tmp['is_hubei_dlq'] = '否'
            }
            tmp['is_contact_dlq'] = ''
            if (tmp['is_contact'] === '1') {
              tmp['is_contact_dlq'] = '是'
            } else if (tmp['is_contact'] === '0') {
              tmp['is_contact_dlq'] = '否'
            }
            tmp['health_state_dlq'] = ''
            let health_arr = tmp['health_state'].split('^')
            let health_dlq_arr = []
            health_arr.forEach(item => {
              health_dlq_arr.push(this.healthObj[item])
            })
            tmp['health_state_dlq'] = health_dlq_arr.join(',')

            //console.log(tmp['p2'])
            try {
              const p2_dlq = JSON.parse(tmp['p2'])
              console.log(p2_dlq)
            } catch (e) {
              console.log(e)
            }
            //const p2_dlq = JSON.parse(tmp['p2'])
            //const p2_dlq = (new Function("return " + tmp ))()
            //console.log(p2_dlq)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        margin-top: 10px;
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
</style>
